<template>
  <view class="coupon-page">
    <!-- 顶部兑换区 -->
    <view class="redeem-section">
      <view class="redeem-input-box">
        <uni-icons type="scan" size="24" color="#999"></uni-icons>
        <input 
          v-model="exchangeCode" 
          class="redeem-input"
          placeholder="请输入兑换码"
          placeholder-style="color: #999;"
        />
        <text class="redeem-btn" @tap="handleRedeem">兑换</text>
      </view>
      <text class="redeem-tip" @tap="showUsageGuide">使用说明</text>
    </view>

    <!-- Tab切换 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @tap="currentTab = index"
      >
        <text class="tab-text">{{ tab.label }}</text>
        <text v-if="tab.count > 0" class="tab-count">({{ tab.count }})</text>
      </view>
    </view>

    <!-- 优惠券列表 -->
    <scroll-view class="coupon-list" scroll-y>
      <!-- 未使用 -->
      <view v-if="filteredCoupons.length === 0" class="empty-state">
        <uni-icons type="gift" size="80" color="#ccc"></uni-icons>
        <text class="empty-text">
          {{ currentTab === 0 ? '暂无可用优惠券' : currentTab === 1 ? '暂无已使用优惠券' : '暂无过期优惠券' }}
        </text>
        <text v-if="currentTab === 0" class="empty-hint">去领券中心看看吧~</text>
      </view>

      <view 
        v-for="coupon in filteredCoupons" 
        :key="coupon.couponId"
        class="coupon-item"
        :class="{ 
          used: coupon.status === 1,
          expired: coupon.status === 2
        }"
        @tap="showCouponDetail(coupon)"
      >
        <!-- 优惠券左侧金额 -->
        <view class="coupon-left">
          <text class="coupon-amount">{{ formatCouponAmount(coupon) }}</text>
          <text class="coupon-condition">{{ formatCondition(coupon) }}</text>
        </view>

        <!-- 优惠券右侧信息 -->
        <view class="coupon-right">
          <view class="coupon-info">
            <text class="coupon-title">{{ coupon.description || '优惠券' }}</text>
            <text class="coupon-scope">{{ coupon.usageScope }}</text>
            <text class="coupon-date">
              有效期至 {{ formatDate(coupon.validUntil) }}
            </text>
          </view>

          <!-- 状态标记 -->
          <view v-if="coupon.status === 2" class="coupon-stamp expired-stamp">
            <text>已过期</text>
          </view>
          <view v-else-if="coupon.status === 1" class="coupon-stamp used-stamp">
            <text>已使用</text>
          </view>
          <view v-else class="coupon-action">
            <text class="action-btn">立即使用</text>
          </view>
        </view>

        <!-- 优惠券详情箭头 -->
        <view class="coupon-detail-icon" @tap.stop="toggleDetail(coupon)">
          <text class="detail-text">详细信息</text>
          <uni-icons 
            :type="expandedIds.includes(coupon.couponId) ? 'arrowup' : 'arrowdown'" 
            size="14" 
            color="#999"
          ></uni-icons>
        </view>

        <!-- 展开的详细信息 -->
        <view 
          v-if="expandedIds.includes(coupon.couponId)" 
          class="coupon-detail-expand"
        >
          <view class="detail-row">
            <text class="detail-label">券码:</text>
            <text class="detail-value">{{ coupon.couponCode }}</text>
          </view>
          <view v-if="coupon.maxDiscountAmount" class="detail-row">
            <text class="detail-label">最高优惠:</text>
            <text class="detail-value">¥{{ coupon.maxDiscountAmount }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">有效期:</text>
            <text class="detail-value">
              {{ formatDate(coupon.validFrom) }} 至 {{ formatDate(coupon.validUntil) }}
            </text>
          </view>
          <view v-if="coupon.usedAt" class="detail-row">
            <text class="detail-label">使用时间:</text>
            <text class="detail-value">{{ formatDate(coupon.usedAt) }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 去领券中心 -->
    <view class="footer-action" @tap="goToCouponCenter">
      <view class="action-badge">6 张新券</view>
      <text class="action-text">去领券中心</text>
      <uni-icons type="arrowright" size="16" color="#00C853"></uni-icons>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useCoupon } from '@/composables/useCoupon';
import type { Coupon } from '@/types/coupon';

const {
  filteredCoupons,
  stats,
  loading,
  currentTab,
  loadCoupons,
  handleRedeem: handleRedeemCoupon,
  formatCouponAmount,
  formatCondition
} = useCoupon();

const exchangeCode = ref('');
const expandedIds = ref<number[]>([]);

// Tab配置
const tabs = computed(() => [
  { label: '未使用', count: stats.value.unused },
  { label: '已使用', count: stats.value.used },
  { label: '已过期', count: stats.value.expired }
]);

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
};

// 兑换优惠券
const handleRedeem = async () => {
  if (!exchangeCode.value.trim()) {
    uni.showToast({
      title: '请输入兑换码',
      icon: 'none'
    });
    return;
  }

  const success = await handleRedeemCoupon(exchangeCode.value);
  if (success) {
    exchangeCode.value = '';
  }
};

// 显示使用说明
const showUsageGuide = () => {
  uni.showModal({
    title: '使用说明',
    content: '1. 运营券仅可用于抵扣大菜事部分商品单笔订单。期间若卡券遭到冻结，可选择优化卡券冻结至其它可用。\n\n2. 虚拟商品及部分特殊商品不可用，特殊活动时期根据说明。 小样配色仅任意单个门店免单一次）\n\n3. 运营券可叠加，抵线可根据不同需求平台参考。',
    showCancel: false
  });
};

// 切换详情展开
const toggleDetail = (coupon: Coupon) => {
  const index = expandedIds.value.indexOf(coupon.couponId);
  if (index > -1) {
    expandedIds.value.splice(index, 1);
  } else {
    expandedIds.value.push(coupon.couponId);
  }
};

// 显示优惠券详情
const showCouponDetail = (coupon: Coupon) => {
  if (coupon.status === 0) {
    // 未使用的券可以跳转到商家列表
    uni.showToast({
      title: '跳转到商家列表',
      icon: 'none'
    });
  }
};

// 去领券中心
const goToCouponCenter = () => {
  uni.showToast({
    title: '领券中心功能开发中',
    icon: 'none'
  });
};

onMounted(() => {
  loadCoupons();
});
</script>

<style scoped>
.coupon-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 兑换区 */
.redeem-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.redeem-input-box {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 50rpx;
  margin-bottom: 15rpx;
}

.redeem-input {
  flex: 1;
  font-size: 28rpx;
}

.redeem-btn {
  padding: 10rpx 30rpx;
  background-color: #00C853;
  color: #fff;
  border-radius: 30rpx;
  font-size: 26rpx;
}

.redeem-tip {
  font-size: 24rpx;
  color: #00C853;
  display: block;
  text-align: right;
}

/* Tab栏 */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 5rpx;
  padding: 30rpx 0;
  position: relative;
}

.tab-text {
  font-size: 30rpx;
  color: #666;
}

.tab-count {
  font-size: 24rpx;
  color: #999;
}

.tab-item.active .tab-text {
  color: #00C853;
  font-weight: bold;
}

.tab-item.active .tab-count {
  color: #00C853;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #00C853;
  border-radius: 2rpx;
}

/* 优惠券列表 */
.coupon-list {
  height: calc(100vh - 350rpx);
  padding: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.empty-hint {
  font-size: 24rpx;
  color: #00C853;
  margin-top: 10rpx;
}

/* 优惠券卡片 */
.coupon-item {
  position: relative;
  display: flex;
  background: linear-gradient(135deg, #00C853 0%, #00E676 100%);
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 200, 83, 0.2);
}

.coupon-item.used,
.coupon-item.expired {
  background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.coupon-left {
  width: 220rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30rpx 20rpx;
  border-right: 2rpx dashed rgba(255, 255, 255, 0.5);
}

.coupon-amount {
  font-size: 56rpx;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  margin-bottom: 10rpx;
}

.coupon-condition {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.coupon-right {
  flex: 1;
  display: flex;
  padding: 30rpx;
  position: relative;
}

.coupon-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.coupon-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;
}

.coupon-scope {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.coupon-date {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: auto;
}

/* 状态标记 */
.coupon-stamp {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3rpx solid rgba(255, 255, 255, 0.8);
  transform: rotate(-15deg);
}

.coupon-stamp text {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
}

.expired-stamp {
  border-color: rgba(0, 0, 0, 0.3);
}

.expired-stamp text {
  color: rgba(0, 0, 0, 0.5);
}

.used-stamp {
  border-color: rgba(0, 0, 0, 0.3);
}

.used-stamp text {
  color: rgba(0, 0, 0, 0.5);
}

.coupon-action {
  position: absolute;
  top: 50%;
  right: 30rpx;
  transform: translateY(-50%);
}

.action-btn {
  padding: 15rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
  border: 2rpx solid #fff;
}

/* 详细信息 */
.coupon-detail-icon {
  position: absolute;
  bottom: 15rpx;
  right: 20rpx;
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.detail-text {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
}

.coupon-detail-expand {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-radius: 0 0 16rpx 16rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.detail-row {
  display: flex;
  padding: 10rpx 0;
  font-size: 24rpx;
}

.detail-label {
  width: 150rpx;
  color: #666;
}

.detail-value {
  flex: 1;
  color: #333;
}

/* 底部操作区 */
.footer-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-badge {
  padding: 4rpx 12rpx;
  background-color: #ff3b30;
  color: #fff;
  font-size: 20rpx;
  border-radius: 20rpx;
}

.action-text {
  font-size: 28rpx;
  color: #00C853;
  font-weight: bold;
}
</style>